.clearfix::after{
    content: "";
    display: block;
    clear: both;
}
//头部搜索框
header{
    position: fixed;
    z-index: 999;
    width: 100%;
    min-width: 320px;
    // max-width: 1024px;
    height: 50px;
    background: rgba(0,0,0,0.2);
    margin: 0 auto;
    display: flex;

    .search-box{
        width: 90%;
        margin: 0 auto;
        align-self: center;
        height: 30px;
        border: 1px solid #fff;
        border-radius: 30px;
        overflow: hidden;
        
        label{
            width: 10%;
            float: left;

            i{
                float: left;
                width: 100%;
                height: 100%;
                text-align: center;
                line-height: 30px;
                font-weight: normal;
                color: #fff;
                font-size: 18px;
            }
        }
        input{
            height: 95%;
            // padding-left: 10%;
            padding-right: 5%;
            border: 0;
            float: left;
            width: 90%;
            background: none;
            background: transparent;

            &:focus{
                outline: none;
            }
        }
    }
}
//轮播图
#myCarousel{
    height: 2rem;
    width: 100%;
    min-width: 320px;
    & img{
        height:2rem;
        width: 100%;
    }
}
//小方块分类
.classifys{
    // width: 95%;
    min-width: 320px;
    .classify{
        width: 100%;
        &>div{
            // position: relative;
            border: 1px solid #ccc;
            // height: 50px;
            width: 100%/3;
            // height: 200px;
            float: left;
            &>div{
                overflow: hidden;
                width: 90%;
                margin: 5%;
                background: rgba(0,0,0,0.2);
            }
        }
        .big-classify{
            // height: 2rem;
            &>div{
                // overflow: hidden;
                
                img{
                    display: block;
                    width: 90%;
                    margin: 0 auto;
                }
            }
        }
        &:nth-child(1) .big-classify>div{
            background: #dd4b60;
        }
        &:nth-child(2) .big-classify>div{
            background: #5b99e8;
        }
        &:nth-child(3) .big-classify>div{
            background: #2dbd56;
        }
        .little-classify{
            // height: 1rem;
        }

    }
}

